<template>
	<view @tap="click" :class="{active:isActive}">
		<text class="iconfont" :class="name" :style="[iconStyle]">
		</text>
	</view>
</template>

<script>
/**
 * icon 图标
 * @property {String} name 图标名称
 * @property {String} color 图标颜色（默认inherit）
 * @property {String | Number} size 图标字体大小，单位rpx（默认32）
 * @event {Function} click 点击图标时触发
 * @example <iconfont name="icon-zhuanfa" size="50" color="red"></iconfont>
 */
export default {
	name: 'iconfont',
	props: {
		// 图标类名
		name: {
			type: String,
			default: ''
		},
		// 图标颜色，可接受主题色
		color: {
			type: String,
			default: ''
		},
		// 字体大小，单位rpx
		size: {
			type: [Number, String],
			default: 'inherit'
		},
		// 是否显示粗体
		bold: {
			type: Boolean,
			default: false
		},
		// 点击图标的时候传递事件出去的index（用于区分点击了哪一个）
		index: {
			type: [Number, String],
			default: ''
		},
	},
  data() {
    return {
      isActive:false,
    }
  },
	computed: {
		iconStyle() {
			let style = {}
			style = {
				fontSize: this.size == 'inherit' ? 'inherit' : this.$u.addUnit(this.size),
        fontWeight: this.bold ? 'bold' : 'normal',
        // fontWeight: this.bold ? 'normal' : 'bold',
			}
			return style
		},
	},
	methods: {
		click() {
			this.$emit('click', this.index);
      this.isActive = !this.isActive
		},
		touchstart() {
			this.$emit('touchstart', this.index)
		}
	}
}
</script>

<style scoped lang="scss">
  .active{
    color: $supernut-cikir_red;
  }
</style>
